import {
  Input, Checkbox, Radio, Select, Button
} from 'antd';

import { SpanWidth } from '@/pages/Drag/Enums';
const { TextArea } = Input;

export function titleRender(config: any, props: any, key: string) {

  function onInputChange(e: any, key: string) {
    const data = { ...config, [key]: e.target.value }
    props.onChangeCallback(data);
  }
  function onCheckBoxChange(e: any) {
    const data = { ...config, showTitle: e.target.checked };
    props.onChangeCallback(data);
  }
  return (
    <div className="item">
      <h4 className="tit"><span>*</span> 标题：</h4>
      <Input
        value={config[key]}
        defaultValue={config[key]}
        onChange={(e) => onInputChange(e, key)}
      />
      <Checkbox
        style={{ marginTop: '5px' }}
        checked={config.showTitle}
        onChange={onCheckBoxChange}
      >
        显示标题
      </Checkbox>
    </div>
  )
}

export function fieldRender(config: any, props: any, key: string) {
  function onInputChange(e: any, key: string) {
    const reg = /^\w+$/;
    if (e.target.value.length && reg.test(e.target.value)) {
      const data = { ...config, [key]: e.target.value }
      props.onChangeCallback(data);
    } else if (!e.target.value) {
      const data = { ...config, [key]: e.target.value }
      props.onChangeCallback(data);
    }
  }
  return (
    <div className="item" key={key}>
      <h4 className="tit"><span>*</span> 字段名称：</h4>
      <Input

        value={config[key]}
        defaultValue={config[key]}
        onChange={(e) => onInputChange(e, key)}
        placeholder="请设置字段名"
      />
    </div>
  )
}
export function descRender(config: any, props: any, key: string) {
  function onInputChange(e: any, key: string) {
    const data = { ...config, [key]: e.target.value }
    props.onChangeCallback(data);
  }
  return (
    <div className="item" key={key}>
      <h4 className="tit">描述信息：</h4>
      <TextArea
        rows={3}
        value={config[key]}
        defaultValue={config[key]}
        onChange={(e) => onInputChange(e, key)}
        style={{ resize: 'none' }}
      />
    </div>
  )
}
export function tipRender(config: any, props: any, key: string) {
  function onInputChange(e: any, key: string) {
    const data = { ...config, props:{...config.props,[key]: e.target.value} }
    props.onChangeCallback(data);
  }
  return (
    <div className="item" key={key}>
      <h4 className="tit">提示文字：</h4>
      <Input
        value={config[key]}
        defaultValue={config[key]}
        onChange={(e) => onInputChange(e, key)}
      />
    </div>
  )
}

export function checkRender(config: any, props: any, key: string) {
  return (
    <div className="item" key={key}>
      <h4 className="tit">校验：</h4>
      <Checkbox
        checked={config[key].required}
        onChange={(e) => {
          const data = { ...config, [key]: { ...config[key], required: e.target.checked } }
          // setConfig(data)
          props.onChangeCallback(data)
        }}
      >
        必填
      </Checkbox>
    </div>
  )
}

export function spanWidthRender(config: any, props: any, key: string) {
  function onInputChange(e: any, key: string) {
    const data = { ...config, [key]: e.target.value }
    props.onChangeCallback(data);
  }
  return (
    <div className="item" key={key}>
      <h4 className="tit">字段宽度：</h4>

      <Radio.Group
        onChange={(e) => { onInputChange(e, key) }}
        defaultValue={config[key]}
        value={config[key]}
        buttonStyle="solid">
        <Radio.Button value={SpanWidth.W5}>1/4</Radio.Button>
        <Radio.Button value={SpanWidth.W4}>1/3</Radio.Button>
        <Radio.Button value={SpanWidth.W3}>2/4</Radio.Button>
        <Radio.Button value={SpanWidth.W2}>3/4</Radio.Button>
        <Radio.Button value={SpanWidth.W1}>整行</Radio.Button>
      </Radio.Group>
    </div>
  )
}
export function fieldPermissionsRender(config: any, props: any, key: string) {
  return (
    <div className="item" key={key}>
      <h4 className="tit">字段权限：</h4>
      <div className="col">
        <Checkbox
          checked={config[key].show}
          onChange={(e) => {
            const data = { ...config, [key]: { ...config[key], show: e.target.checked } }
            // setConfig(data)
            props.onChangeCallback(data)
          }}
        >
          可见
        </Checkbox>
        <Checkbox
          checked={config[key].edit}
          onChange={(e) => {
            const data = { ...config, [key]: { ...config[key], edit: e.target.checked } }
            // setConfig(data)
            props.onChangeCallback(data)
          }}
        >
          可编辑
        </Checkbox>
      </div>

    </div>
  )
}
export function isInline(config: any, props: any, key: string) {
  function onInputChange(e: any, key: string) {
    const data = { ...config, [key]: e.target.value }
    props.onChangeCallback(data);
  }
  return (
    <div className="item" key={key}>
      <h4 className="tit">布局方式：</h4>
      <Radio.Group
        onChange={(e) => { onInputChange(e, key) }}
        defaultValue={config[key]}
        value={config[key]}
        buttonStyle="solid">
        <Radio.Button value={false}>上下</Radio.Button>
        <Radio.Button value={true}>左右</Radio.Button>
      </Radio.Group>
    </div>
  )
}
